#{ifErrors}
<div class="error">
   <h1>Oops...</h1>
   #{errors}
       <li>${error}</li>
   #{/errors}
</div>
#{/ifErrors}

#{form @create() , id:'creationForm' }
<div class="content-1">
	<div>
		<h1>&{'date.start'} :</h1>
		<div id="datestart" />
		<input type="hidden" id="start" name="start" />
	</div>
	<div>
		<h1>&{'date.end'} :</h1>
		<div id="dateend" />
		<input type="hidden" id="end" name="end" />
	</div>
	<div>
		<h1>&{'observations'} :</h1>
		<textarea id="observations" name="observations" rows="12" cols="70" />
	</div>
</div>
<div class="content-2">
	<div>
		<h1 style="float:left;margin-right:10px;margin-top:5px;">&{'request.types'} : </h1> <select id="requesttype"
			name="requesttype"> #{list items:types, as:'typ'}
			<option value="${typ.id}">${typ.description}</option> #{/list}
		</select>

	</div>
	<div>
		<button id="requestsend">&{'request.send'}</button>
	</div>
</div>

#{/form}


<script type="text/javascript">
	$(function() {
		
		$("button").button();
		
		$("#requesttype").selectmenu();
		
		$("#datestart").datepicker({
			dateFormat:"dd/mm/yy",
			onSelect : function(dateText, inst) {
				$("#start").val(dateText);
			}
		});
		$("#dateend").datepicker({
			dateFormat:"dd/mm/yy",
			onSelect : function(dateText, inst) {
				$("#end").val(dateText);
			}
		});
	});
</script>